<template>
	<view class="container">
		<view class="agent">
			<view class="info">
				<view class="item" v-for="item in list" :key='item.id' @click="toInfo(item.url)">
					<image :src="item.img" mode="widthFix"></image>
					<text>{{item.text}}</text>
				</view>
			</view>

			<view class="battery">
				<view class="my">
					<text>我的电池</text>
					<text class="num">当前<text>{{battery}}</text>使用</text>
				</view>
				<scroll-view scroll-y="true" class="content" v-if="myList.length != 0" @scrolltolower="loadMore">
					<view class="batt" v-for="(item,index) in myList" :key="index" @click="toBatteryDetail(item.code)">
						<view class="left">
							<image src="/static/img/agent/battery.png" mode="widthFix"></image>
							<view class="txt">
								<view class="name">{{item.name}}</view>
								<view class="money">
									总收入
									<text>￥{{item.total_fee}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<text class="use">{{item.use_num_text}}</text>/
							<text>{{item.total_text}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="content" v-else>
					<view class="empty">
						暂无明细
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		agentBattery,
		accountIndex,
		getUserInfo
	} from '../../api/api.js'
	export default {
		data() {
			return {
				list: [{
						id: 1,
						img: '/static/img/agent/money.png',
						text: '总收入',
						url: '/pages/agent/index/income'
					},
					{
						id: 2,
						img: '/static/img/agent/use.png',
						text: '使用记录',
						url: '/pages/agent/index/record'
					},
					{
						id: 3,
						img: '/static/img/agent/day.png',
						text: '日报表',
						url: '/pages/agent/index/day'
					},
					{
						id: 4,
						img: '/static/img/agent/month.png',
						text: '月报表',
						url: '/pages/agent/index/month'
					}
				],
				battery: '',
				total: '',
				day_total: '',
				month_total: '',
				online: '',
				use_total: '',
				myList: [],
				total: 0,
				last_page: 1,
				current_page: 1,
				per_page: 10
			}
		},
		onLoad() {
			this.getuser()
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			// 代理
			toInfo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getInfo(loadMore) {
				agentBattery({
					limit: this.per_page,
					page: this.current_page
				}).then(res => {
					if (loadMore) {
						console.log(loadMore)
						for (let i = 0; i < res.data.data.length; i++) {
							this.myList.push(res.data.data[i])
						}
					} else {
						this.myList = res.data.data
					}
					this.battery = res.data.curr_use
					this.total = res.data.total
					this.last_page = res.data.last_page
					// this.current_page = res.data.current_page
					// this.myList = res.data.data
				})
			},
			getuser(){
				getUserInfo().then(res=>{
					console.log(res)
					if(res.data.is_agent == 0){
							uni.showModal({
								title: '提示',
								content: '暂无权限',
								showCancel: false,
								success: function(res) {
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
					}
				})
			},
			loadMore(e) {
				// console.log(e)
				if (this.current_page < this.last_page) {
					this.current_page += 1
					this.getInfo('loadMore')
				}
			},
			toBatteryDetail(id) {
				uni.navigateTo({
					url: '/pages/agent/index/detail?id=' + id
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.agent {
		width: 100%;
		height: 100%;

		.info {
			width: 100%;
			height: 230upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 70%;
					margin-bottom: 20upx;
				}

				text {
					font-size: 24upx;
				}
			}
		}

		.battery {
			width: 100%;
			height: calc(100% - 280upx);
			background-color: #FFFFFF;
			margin-top: 30upx;
			overflow: hidden;

			.my {
				width: calc(100% - 60upx);
				height: 80upx;
				margin: 0 auto;
				display: flex;
				font-size: 28upx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid #e9e6e9;

				.num {
					color: #999999;
					font-size: 24upx;

					text {
						color: #fb817f;
					}
				}

			}

			.content {
				width: calc(100% - 60upx);
				height: calc(100% - 80upx);
				margin: 0 auto;

				.batt {
					width: 100%;
					height: 130upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1upx solid #e9e6e9;

					.left {
						display: flex;
						align-items: center;
						font-size: 28upx;

						image {
							width: 80upx;
							margin-right: 20upx;
						}

						.txt {

							.name {}

							.money {
								color: #999999;

								text {
									color: #fb817f;
								}
							}
						}
					}

					.right {
						font-size: 32upx;

						text {
							font-size: 24upx;
						}

						.use {
							color: #fb817f;
							font-size: 32upx;
						}
					}
				}

				.empty {
					height: 100upx;
					text-align: center;
					line-height: 100upx;
				}
			}
		}

	}

	</style>
